import React, { Component} from 'react'
import PropTypes from 'prop-types'
import { getCurrentNode } from '@/store/selectors'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux';
import actionsC from '@/store/actions.js'
import * as utils from '@/utils/index.js'
import PanleWrapper from '@/components/panel/panel-wrapper'

let nodeActions=actionsC()

function isFlowType({key,value,styles}){
    return _.get(styles, [key])==value
}
class PanelPositionBy extends Component {
	constructor(props) {
		super(props);
		this.state = {
            candidateList: []
		}
	}
	componentDidMount(){
	}
	componentWillReceiveProps(nextProp){
		let {currentNode} = nextProp
		if(_.isEmpty(currentNode)) return
        let candidateList = []
        Object.keys(currentNode.styles).forEach((key)=>{
            let reg = /,float,|,position,|,transform,/
            if(reg.test(`,${key},`)){
                let used = currentNode.positionBy.join(":")==`${key}:${currentNode.styles[key]}`
                candidateList.push({
                    key: key,
                    value: currentNode.styles[key],
                    used
                })
            }
        })
        this.setState({
            candidateList
        })
    }
    handleItemClick(item, index){
        let {currentNode,dispatch,currentPath,nodeTree} = this.props

        currentNode.positionBy = item.used ? [] : [item.key,item.value]
        
        dispatch.nodeUpdateByPath({
			path: currentPath,
			node: currentNode
		});
    }
	render() {
        const {candidateList} = this.state
		return (
			<PanleWrapper clsName="panel-align" panelName="position by">
				<ul className="toggle-list">
					{utils.render_list(candidateList,(item, index)=>{
						let name = item.key=='float' ? 'margin' : item.key
						return(
							<li key={index}
                                className={classnames('toggle-item',{active: item.used})}
                                onClick={this.handleItemClick.bind(this, item, index)}
							>{name}</li>
						)
					})}
				</ul>
			</PanleWrapper>
		)
	}
}

PanelPositionBy.defaultProps = {
};

function mapStateToProps(state) {
	return {
		currentNode:getCurrentNode(state),
		nodeTree: state.nodeTree,
		currentPath: state.currentPath,
		tag: state.tag
	}
}

function mapDispatchToProps(dispatch) {
	return {
		dispatch: bindActionCreators(nodeActions, dispatch)
	}
}

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(PanelPositionBy)